<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>运单详情</span>
                <el-button style="float: right; padding: 3px 0" type="text">预览报告</el-button>
            </div>
            <div class="text item">
                <el-table :data="tableData" border style="width: 100%" height="100px">
                    <el-table-column prop="order_number" label="发货单号" width="130"> </el-table-column>
                    <el-table-column prop="equipment" label="设备id" width="120"> </el-table-column>
                    <el-table-column prop="create_time" label="开始时间" width="200"> </el-table-column>
                    <el-table-column prop="end_time" label="结束时间"> </el-table-column>
                    <el-table-column prop="scope" label="安全温度"> </el-table-column>
                    <el-table-column prop="state" label="温度记录" :formatter="state_filter"> </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="port">下载记录</el-button>
                            <!-- <el-button type="text" @click="showdata(scope.row)">查看数据</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <br /><br />
        <el-card class="box-card2">
            <div slot="header" class="clearfix">
                <span>运单信息</span>
            </div>
            <div class="text item">
                <div id="map" style="width:100%;height:300px;"></div>
            </div>
        </el-card>
        <el-card class="box-card1">
            <div slot="header" class="clearfix">
                <span>温度数据</span>
                <el-button style="float: right; padding: 3px 0" type="text">打印图表</el-button>
            </div>
            <div class="text item">
                <div>
                    <!--为echarts准备一个具备大小的容器dom-->
                    <div id="main" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=vtlB4lFIeVxP1hgjEcmhAEdVnhOnlOX7"></script>
<script>
// 引入折线图
import echarts from 'echarts';
import { orderdetail, order } from '../../api/api';
import { MP } from '../map';
export default {
    data() {
        return {
            // 运单id
            order_id: '',
            tableData: [],
            // 时间列表
            time_list: [],
            // 温度列表
            temperature_list: [],
            // 时间温度数据列表
            tem_time_list: [],
            location1: 110.35894,
            location2: 21.27134
        };
    },
    methods: {
        // 获取运单id
        get_order_id() {
            this.order_id = this.$route.query.id;
        },
        // 获取运单详情
        get_order_info() {
            orderdetail({ params: { order_id: this.order_id } })
                .then(res => {
                    var list = [];
                    var list1 = [];
                    var list2 = [];
                    list.push(res.data.data);
                    this.tableData = list;
                    this.tem_time_list = res.data.temperature;
                    for (let i of res.data.temperature) {
                        list1.push(i.temperature);
                        list2.push(i.time);
                    }
                    this.time_list = list2;
                    this.temperature_list = list1;
                    this.drawLine(this.time_list, this.temperature_list);
                    this.location1 = res.data.location1;
                    this.location2 = res.data.location2;
                    this.baidu_map();
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // 状态过滤器
        state_filter(row) {
            return row.state == 1 ? '正常' : row.state == 2 ? '报警' : '未知';
        },
        // 下载记录
        download() {},
        // 查看数据
        showdata() {},
        // 折线图
        drawLine(time, data_s) {
            this.charts = echarts.init(document.getElementById('main'));
            this.charts.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度数据']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: time
                },
                yAxis: {
                    type: 'value'
                },

                series: [
                    {
                        data: data_s,
                        type: 'line'
                    }
                ]
            });
        },
        // 绘制百度地图
        baidu_map(location1, location2) {
            this.$nextTick(function() {
                var _this = this;
                MP(_this.ak).then(BMap => {
                    // 百度地图API功能
                    var map = new BMap.Map('map'); // 创建Map实例
                    map.centerAndZoom(new BMap.Point(121.551257, 38.890002), 11); // 初始化地图,设置中心点坐标和地图级别
                    //添加地图类型控件
                    map.addControl(
                        new BMap.MapTypeControl({
                            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                        })
                    );
                    map.setCurrentCity('大连'); // 设置地图显示的城市 此项是必须设置的
                    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                    var point = new BMap.Point(parseInt(this.location1[0]), parseInt(this.location1[1]));
                    map.centerAndZoom(point, 10);
                    var marker = new BMap.Marker(point); // 创建标注
                    marker.setTitle('收货地');
                    map.addOverlay(marker); // 将标注添加到地图中
                    // 设置标注动画效果。如果参数为null，则取消动画效果。该方法需要在addOverlay方法后设置
                    marker.setAnimation(Animation);
                    var point1 = new BMap.Point(parseInt(this.location2[0]), parseInt(this.location2[1]));
                    map.centerAndZoom(point1, 10);
                    var marker1 = new BMap.Marker(point1); // 创建标注
                    marker.setTitle('发货地');
                    map.addOverlay(marker1); // 将标注添加到地图中
                    // 设置标注动画效果。如果参数为null，则取消动画效果。该方法需要在addOverlay方法后设置
                    marker.setAnimation(Animation);
                });
            });
        },
        // 下载excel
        export2Excel() {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../../lib/Export2Excel');
                const tHeader = ['时间', '温度']; //自定义列名
                const filterVal = ['time', 'temperature']; //对应自怼
                const list = this.tem_time_list; //table数据
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, '时间温度'); //导出文件名称
            });
        },
        formatJson(filterVal, jsonData) {
            console.info(jsonData);
            return jsonData.map(v => filterVal.map(j => v[j]));
        },
        port() {
            this.export2Excel();
        }
    },

    mounted: function() {
        this.get_order_id();
        this.get_order_info();
    }
};
</script>

<style>
.text {
    font-size: 14px;
    text-align: center;
    margin: auto;
}

.item {
    padding: 18px 0;
    width: 100%;
}

.box-card {
    width: 100%;
}
.box-card1 {
    width: 48%;
    float: left;
}
.box-card2 {
    width: 48%;
    float: left;
}
.BMap_cpyCtrl {
    display: none;
}
.anchorBL {
    display: none;
}
</style>